<template>
  <div class="map">
    <el-row :gutter="20">
      <el-col :span="16">
        <div id="mapmain"></div>
      </el-col>
      <el-col :span="8">
        <div class="mapright">
          <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            active-text-color="#409eff"
            @select="handleSelect"
          >
            <el-menu-item index="1">风景</el-menu-item>
            <el-menu-item index="2">交通</el-menu-item>
          </el-menu>

          <div id="fengjing">
            <div
              class="poiItem"
              v-for="(item, index) in poiItem"
              :key="index"
              @mouseenter="rimenter(item)"
            >
              <div class="name">{{ item.name }}</div>
              <div class="distance">{{ item.distance }}米</div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  props: ["location"],
  mounted() {},

  watch: {
    location() {
      this.loadMap();
    },
  },
  methods: {
    handleSelect(key, keyPath) {
      // console.log(key, keyPath);
      this.activeIndex = key;
      this.placeSearch.clear();
      this.map.remove(this.markerList);
      this.poiItem = [];
      this.markerList = [];
      this.placeSearch.setType(
        this.activeIndex == "1" ? "旅游景点" : "交通设施"
      );
      var cpoint = [this.location.longitude, this.location.latitude]; //中心点坐 标
      this.placeSearch.searchNearBy("", cpoint, 1000, (status, result) => {
        // console.log(result); //这里得到周边地址坐标
        result.poiList.pois.forEach((poiItem, index) => {
          // 点标记显示内容，HTML要素字符串
          var markerContent =
            "" +
            '<div class="custom-content-marker">' +
            '   <img src="//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png">' +
            `<div class="close-btn" onclick="clearMarker()">${
              index + 1
            }</div>` +
            "</div>";

          var marker = new AMap.Marker({
            position: [poiItem.location.lng, poiItem.location.lat],
            // 将 html 传给 content
            content: markerContent,
            // 以 icon 的 [center bottom] 为原点
          }).on("mouseover", () => {
            // console.log(1);
            this.map.setCenter([poiItem.location.lng, poiItem.location.lat]);
          });

          this.map.add(marker);
          this.markerList.push(marker);
          let newpoiItem = {
            name: poiItem.name,
            distance: poiItem.distance,
            lng: poiItem.location.lng,
            lat: poiItem.location.lat,
          };
          this.poiItem.push(newpoiItem);
        });

        // console.log("交通数组", this.poiItem);
      });
    },

    rimenter(item) {
      // console.log(item);
      this.map.setCenter([item.lng, item.lat]);
    },

    loadMap() {
      this.$nextTick(() => {
        //   全部用箭头函数 因为vue魔改了this 可以全部指向vue本身
        window.onLoad = () => {
          // 2.地图加载完毕的回调函数
          var map = new AMap.Map("mapmain", {
            zoom: 14, //发达缩小级别
            center: [this.location.longitude, this.location.latitude], //中心点坐标 经纬度
            resizeEnable: true,
            //viewMode: "3D", //使用3D视图
          });
          this.map = map;
          //   console.log(this.map);

          // 加载周边搜索
          AMap.service(["AMap.PlaceSearch"], () => {
            //构造地点查询类
            var placeSearch = new AMap.PlaceSearch({
              showCover: false,
              type: "旅游景点", // 兴趣点类别
              pageSize: 10, // 单页显示结果条数
              pageIndex: 1, // 页码
              //city: "广州", // 兴趣点城市
              citylimit: true, //是否强制限制在设置的城市内搜索
              // map: map, // 展现结果的地图实例
              autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
            });

            this.placeSearch = placeSearch;

            var cpoint = [this.location.longitude, this.location.latitude]; //中心点坐标
            placeSearch.searchNearBy("", cpoint, 1000, (status, result) => {
              // console.log(result); //这里得到周边地址坐标
              result.poiList.pois.forEach((poiItem, index) => {
                // console.log(index);

                // 点标记显示内容，HTML要素字符串
                var markerContent =
                  '<div class="custom-content-marker">' +
                  '   <img src="//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png">' +
                  `<div class="close-btn" onclick="clearMarker()">${
                    index + 1
                  }</div>` +
                  "</div>";

                var marker = new AMap.Marker({
                  position: [poiItem.location.lng, poiItem.location.lat],
                  // 将 html 传给 content
                  content: markerContent,
                  // 以 icon 的 [center bottom] 为原点
                }).on("mouseover", () => {
                  // console.log(1);
                  map.setCenter([poiItem.location.lng, poiItem.location.lat]);
                });

                map.add(marker);
                this.markerList.push(marker);

                let newpoiItem = {
                  name: poiItem.name,
                  distance: poiItem.distance,
                  lng: poiItem.location.lng,
                  lat: poiItem.location.lat,
                };
                this.poiItem.push(newpoiItem);
              });

              // console.log("新的数组", this.poiItem);
            });
          });
        };

        // 1.加载高德地图库
        var url =
          "https://webapi.amap.com/maps?v=1.4.15&key=7a5a78be20f4b8544b5d1131965d38bd&callback=onLoad";
        var jsapi = document.createElement("script");
        jsapi.charset = "utf-8";
        jsapi.src = url;
        document.head.appendChild(jsapi);
      });
    },
  },

  data() {
    return {
      activeIndex: "1",
      poiItem: [],
      map: {},
      placeSearch: {},
      markerList: [],
    };
  },
};
</script>

<style lang="less" scoped>
.map {
  height: 360px;
  margin: 40px 0;
  // background-color: red;
  #mapmain {
    width: 650px;
    height: 360px;
    // background-color: chocolate;
  }

  #fengjing,
  #jiaotong {
    height: 330px;
    // background-color: red;
    overflow: hidden;
    overflow-y: auto; //关键

    .poiItem {
      display: flex;
      padding: 10px 20px;
      font-size: 14px;
      justify-content: space-between;
    }
  }

  // 地图导航栏样式
  .el-menu--horizontal > .el-menu-item {
    height: 30px;
    line-height: 30px;
  }

  /deep/.custom-content-marker {
    position: relative;
    width: 25px;
    height: 34px;
    // opacity: 0;
  }

  /deep/.custom-content-marker img {
    width: 100%;
    height: 100%;
  }

  /deep/.custom-content-marker .close-btn {
    position: absolute;
    top: 4px;
    right: 6px;
    width: 15px;
    height: 15px;
    font-size: 12px;
    background: #318ff4;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    line-height: 15px;
    // box-shadow: -1px 1px 1px rgba(10, 10, 10, 0.2);
  }
}
</style>